<template>
	<view class="container">
		<uni-forms ref="form" :value="vehicle" labelWidth="80px">

			<uni-forms-item name="licensePlate" label="选择地区">
				<uni-data-picker placeholder="请选择地区" popup-title="请选择所在地区" :localdata="divisions" :preload="true"
					v-model="destination.province" @nodeclick="pickerClick" @popupopened="pickerPopupopened">
				</uni-data-picker>
			</uni-forms-item>

			<uni-forms-item name="licensePlate" label="车牌号码">
				<uni-easyinput v-model="vehicle.licensePlate" placeholder="请输入车牌号码" />
			</uni-forms-item>

			<uni-forms-item name="vehicleCategory" label="车辆类别">
				<!-- <uni-easyinput v-model="vehicle.vehicleCategory" placeholder="请输入车辆类别" /> -->
				<uni-data-select v-model="vehicle.vehicleCategory" placeholder="请选择车辆类别" :localdata="vehicleTypeDict"
					@change="change"></uni-data-select>
			</uni-forms-item>
			<uni-forms-item name="seatCount" label="座位数量">
				<uni-easyinput v-model="vehicle.seatCount" placeholder="请输入座位数量" />
			</uni-forms-item>

			<button type="primary" @click="submit">提交</button>
		</uni-forms>
	</view>
</template>

<script>
	import {
		request
	} from "http"

	import {
		listVehicle,
		getVehicle,
		addVehicle,
		updateVehicle
	} from "@/api/kk/vehicle"

	import {
		getDicts
	} from "@/api/system/dict/data"

	import {
		dicTrans
	} from "@/utils/kkTools"

	import {
		listDivision
	} from "@/api/kk/division"


	export default {
		data() {
			return {
				// 地址选择框数据
				divisions: [], //行政区划

				destination: {
					id: undefined,
					province: undefined,
					city: undefined,
					county: undefined,
					name: undefined,
					difficulty: undefined,
					maxAltitude: undefined,
					hikingDistance: undefined,
					elevationGain: undefined,
					description: undefined,
					enabled: undefined,
				},

				vehicle: {
					vehicleId: undefined,
					userId: undefined,
					licensePlate: undefined,
					brand: undefined,
					model: undefined,
					color: undefined,
					vehicleCategory: undefined,
					seatCount: undefined,
					vehiclePhoto: undefined
				},
				vehicleTypeDict: [],
				rules: {
					licensePlate: {
						rules: [{
							required: true,
							errorMessage: '车牌号码不能为空'
						}]
					},
					brand: {
						rules: [{
							required: true,
							errorMessage: '车辆品牌不能为空'
						}]
					},
					model: {
						rules: [{
							required: true,
							errorMessage: '车辆型号不能为空'
						}]
					},
					color: {
						rules: [{
							required: true,
							errorMessage: '车辆颜色不能为空'
						}]
					},
					vehicleCategory: {
						rules: [{
							required: true,
							errorMessage: '车辆类别不能为空'
						}]
					},
					seatCount: {
						rules: [{
							required: true,
							errorMessage: '座位数量不能为空'
						}]
					},
				}
			}
		},
		mounted() {
			this.pickerPopupopened()
		},
		created() {
			this.vehicle.userId = localStorage.getItem('userId');
			listVehicle(this.vehicle.userId).then(response => {
				this.loading = true
				listVehicle(this.vehicle).then(response => {
					this.vehicle = response.rows[0]
					this.loading = false
				})
			})
			getDicts('vehicle_type_dict').then(response => {
				dicTrans(response.data, this.vehicleTypeDict)
			})
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			pickerPopupopened: function() {
				// 加载根节点
				debugger
				listDivision({
					parentCode: 0
				}).then(response => {
					this.divisions = response.data.map(item => ({
						value: item.code,
						text: item.name,
						level: item.level,
						isLoaded: false,
						isleaf: item.level === 3
					}))
				})
			},
			getDivisions: function() {
				// 查询根节点列表
				listDivision({
					parentCode: 0
				}).then(response => {
					this.divisions = response.data.map(item => ({
						value: item.code,
						text: item.name,
						level: item.level,
						isLoaded: false,
						isleaf: item.level === 3
					}))
				})
				debugger
				//获取第一个根节点的子节点
				listDivision({
					parentCode: this.divisions[0].value
				}).then(response => {
					const children = response.data.map(item => ({
						value: item.code,
						text: item.name,
						level: item.level,
						isLoaded: false,
						isleaf: item.level === 3
					}))
					this.divisions[0].isLoaded = true
					this.divisions[0].children = children
					console.log(this.divisions)
				})
			},
			pickerOnChange(e) {
				// const value = e.detail.value[0].value
				// const text = e.detail.value[0].text
				// console.log('pickerOnChange选择的节点:', value, text)
			},
			pickerOnClick(e) {
				listDivision({
					parentCode: e.value
				}).then(response => {
					const children = response.data.map(item => ({
						value: item.code,
						text: item.name,
						level: item.level,
						isLoaded: false,
						isleaf: item.level === 3
					}))
					console.log(children)
					e.isLoaded = true
					e.children = children
					const index = this.divisions.findIndex(node => node.value === e.value);
					if (index !== -1) {
						this.divisions[index] = e
					}
					console.log(this.divisions)
				})
			},
			submit() {
				if (this.vehicle.vehicleId > 0) {
					this.$refs.form.validate().then(res => {
						updateVehicle(this.vehicle).then(response => {
							this.vehicle = response.data;
							this.$modal.msgSuccess("修改车辆信息成功")
						})
					})
				} else {
					this.$refs.form.validate().then(res => {
						addVehicle(this.vehicle).then(response => {
							this.vehicle = response.data;
							this.$modal.msgSuccess("添加车辆信息成功")
						})
					})
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #ffffff;
	}

	.container {
		padding-top: 36rpx;
		padding: 15px;
	}

	.title {
		font-size: 14px;
		font-weight: bold;
		margin: 20px 0 5px 0;
	}

	.data-pickerview {
		height: 400px;
		border: 1px #e5e5e5 solid;
	}

	.popper__arrow {
		top: -6px;
		left: 50%;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #EBEEF5;
	}

	.popper__arrow {
		top: -6px;
		left: 50%;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #EBEEF5;
	}
</style>